<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Simpler Baidu Options</title>
</head>
<style>
body {
  font-family: arial, sans-serif;
  font-size: 10px;
}
td {
  //padding: 5px;
} 
.secondary td {
  padding: 0px 5px;
}
.header {
  font-weight: bold;
  border-bottom: solid 1px #ccc;
  padding-bottom: 1px;
}    
.label {
  text-align: right;
}
.buttons {
  text-align: right;
  padding-top: 1em;

}
</style>
<script type="text/javascript">

// Saves options to localStorage.
function save_options() {
  var mode = '';
  var radios = document.getElementById("f").hidden_mode;
  for (var i = 0; i < radios.length; i++) {
    var radio = radios[i];
    if( radio.checked )
    {
      mode = radio.value;
    }
  }  
  localStorage["hidden_mode"] = mode;

  // Update status to let user know options were saved.
  var status = document.getElementById("status");
  status.innerHTML = "设置已经保存";
  setTimeout(function() {
    status.innerHTML = "";
  }, 1000);
}

// Restores select box state to saved value from localStorage.
function restore_options() {
  var mode = localStorage["hidden_mode"];
  if (!mode) {
    mode = 'load';
  }
  var radios = document.getElementById("f").hidden_mode;
  console.log( radios );
  for (var i = 0; i < radios.length; i++) {
    var radio = radios[i];
    radio.checked = (radio.value == mode);
  }
}

</script>

<body onload="restore_options()">

<form id="f">
<table id="t"">
  <tbody>
    <tr>
      <td class="header" colspan="2">Simpler Baidu Options</td>
    </tr>
    <tr>
      <td class="label">隐藏模式</td>
      <td>
        <label>
          <input type="radio" name="hidden_mode" value="never">不隐藏</input>
        </label>
      </td>
    </tr>
    <tr>
      <td/>
      <td>
        <label>
          <input type="radio" name="hidden_mode" value="load">载入隐藏</input>
        </label>
      </td>
    </tr>
    <tr>
      <td/>
      <td>
        <label>
          <input type="radio" name="hidden_mode" value="forever">一直隐藏</input>
        </label>
      </td>
    </tr>    
    <tr>
      <td class="buttons" colspan="2">
        <button onclick="save_options()">保存</button>
      </td>
    </tr>
  </tbody>
</table>
</form>
</body>
</html>